<template>
  <div class="calculator">
    <h2>计算器</h2>
    
    <!-- 第一个数字输入框 -->
    <div class="input-group">
      <label for="number1">数字1:</label>
      <input 
        id="number1"
        v-model.number="number1" 
        type="number" 
        placeholder="请输入第一个数字"
        @input="updateNumber1"
      />
    </div>
    
    <!-- 第二个数字输入框 -->
    <div class="input-group">
      <label for="number2">数字2:</label>
      <input 
        id="number2"
        v-model.number="number2" 
        type="number" 
        placeholder="请输入第二个数字"
        @input="updateNumber2"
      />
    </div>
    
    <!-- 操作符选择框 -->
    <div class="input-group">
      <label for="operation">选择+/-*/:</label>
      <select id="operation" v-model="operation" @change="updateOperation">
        <option value="+">加(+)</option>
        <option value="-">减(-)</option>
        <option value="*">乘(*)</option>
        <option value="/">除(/)</option>
      </select>
    </div>
    
    <!-- 计算按钮 -->
    <button @click="calculate" class="calculate-btn">确定</button>
    
    <!-- 结果显示 -->
    <div class="result">
      结果: {{ result }}
    </div>
    
    <!-- 清除数据按钮 -->
    <button @click="clearData" class="clear-btn">清除数据</button>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useCalculatorStore } from '../stores/calculator.js'

// 获取store实例
const calculatorStore = useCalculatorStore()

// 创建响应式的数据绑定
const number1 = computed({
  get: () => calculatorStore.number1,
  set: (value) => calculatorStore.setNumber1(value)
})

const number2 = computed({
  get: () => calculatorStore.number2,
  set: (value) => calculatorStore.setNumber2(value)
})

const operation = computed({
  get: () => calculatorStore.operation,
  set: (value) => calculatorStore.setOperation(value)
})

const result = computed(() => calculatorStore.result)

// 更新方法
const updateNumber1 = () => {
  calculatorStore.setNumber1(number1.value)
}

const updateNumber2 = () => {
  calculatorStore.setNumber2(number2.value)
}

const updateOperation = () => {
  calculatorStore.setOperation(operation.value)
}

const calculate = () => {
  calculatorStore.calculate()
}

const clearData = () => {
  calculatorStore.clearData()
}
</script>

<style scoped>
.calculator {
  max-width: 400px;
  margin: 50px auto;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
}

h2 {
  text-align: center;
  margin-bottom: 25px;
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

.input-group {
  margin-bottom: 18px;
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: normal;
  color: #333;
  font-size: 14px;
}

input, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  background-color: white;
  color: #333;
}

input:focus, select:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.calculate-btn {
  width: 100%;
  padding: 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
  margin-bottom: 20px;
  transition: background-color 0.2s;
}

.calculate-btn:hover {
  background-color: #45a049;
}

.calculate-btn:active {
  background-color: #3d8b40;
}

.clear-btn {
  width: 100%;
  padding: 10px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: background-color 0.2s;
}

.clear-btn:hover {
  background-color: #d32f2f;
}

.result {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}
</style>